<template>
  <div class="container">
    <h1>测试</h1>
    <img ref="imgBar" @click="downImgHandler($event, true)" />

    <img
      :src="qrcodeImg"
      alt=""
      @click="downImgHandler($event, false)"
      class="qrcodeImg"
    />
  </div>
</template>

<script>
import JsBarcode from "jsbarcode";
import jrQrcode from "jr-qrcode";
export default {
  name: "vedio",
  data() {
    return {
      qrcodeImg: "",
    };
  },
  mounted() {
    this.$nextTick((item) => {
      JsBarcode(this.$refs[`imgBar`], "489458934759349579", {
        format: "CODE128", //条形码的格式
        width: 2, //线宽
        height: 60, //条码高度
        displayValue: true, //是否显示文字信息
      });

      this.qrcodeImg = jrQrcode.getQrBase64("这是二维码-3339882fss", {
        padding: 10, // 二维码四边空白（默认为10px）
        width: 128, // 二维码图片宽度（默认为256px）
        height: 128, // 二维码图片高度（默认为256px）
        correctLevel: QRErrorCorrectLevel.H, // 二维码容错level（默认为高）
        reverse: false, // 反色二维码，二维码颜色为上层容器的背景颜色
        background: "#ffffff", // 二维码背景颜色（默认白色）
        foreground: "#000000", // 二维码颜色（默认黑色）
      });
    });
  },
  methods: {
    downImgHandler(e, flag) {
      // console.log(e,flag)
      // console.log("事件对象", e.target.currentSrc);489458934759349579
      var a = document.createElement("a");
      a.download = flag ? "条形码" : "二维码";
      a.href = e.target.currentSrc;
      document.body.appendChild(a);
      a.click(); // 触发点击事件
      document.body.removeChild(a);
    },
  },
};
</script>

<style></style>
